<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前后端连接测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .test-box {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            text-align: center;
        }
        .status {
            font-size: 18px;
            margin: 20px 0;
            padding: 15px;
            border-radius: 5px;
        }
        .success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
        .info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin: 10px;
        }
        button:hover { background: #0056b3; }
        pre {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            text-align: left;
            overflow-x: auto;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="test-box">
        <h1>🔗 前后端连接测试</h1>
        
        <div id="status" class="status info">
            点击下方按钮测试前后端连接
        </div>
        
        <button onclick="testConnection()">测试连接</button>
        <button onclick="testLogin()">测试登录</button>
        
        <div id="result"></div>
    </div>

    <script>
        const API_BASE_URL = 'http://localhost:8080';
        
        async function testConnection() {
            const statusDiv = document.getElementById('status');
            const resultDiv = document.getElementById('result');
            
            statusDiv.className = 'status info';
            statusDiv.textContent = '正在测试连接...';
            resultDiv.innerHTML = '';
            
            try {
                // 测试后端是否响应
                const response = await fetch(`${API_BASE_URL}/user/get-username?username=admin`, {
                    method: 'GET',
                    mode: 'cors'
                });
                
                if (response.ok) {
                    const data = await response.json();
                    statusDiv.className = 'status success';
                    statusDiv.textContent = '✅ 前后端连接成功！';
                    resultDiv.innerHTML = `
                        <h3>连接测试结果：</h3>
                        <pre>${JSON.stringify(data, null, 2)}</pre>
                    `;
                } else {
                    statusDiv.className = 'status error';
                    statusDiv.textContent = `❌ 连接失败 (状态码: ${response.status})`;
                    resultDiv.innerHTML = `<pre>响应状态: ${response.status} ${response.statusText}</pre>`;
                }
            } catch (error) {
                statusDiv.className = 'status error';
                statusDiv.textContent = '❌ 连接失败';
                resultDiv.innerHTML = `
                    <h3>错误信息：</h3>
                    <pre>${error.message}</pre>
                    <p><strong>可能的原因：</strong></p>
                    <ul>
                        <li>后端服务未启动 (端口8080)</li>
                        <li>数据库连接问题</li>
                        <li>CORS配置问题</li>
                        <li>网络连接问题</li>
                    </ul>
                `;
            }
        }
        
        async function testLogin() {
            const statusDiv = document.getElementById('status');
            const resultDiv = document.getElementById('result');
            
            statusDiv.className = 'status info';
            statusDiv.textContent = '正在测试登录...';
            resultDiv.innerHTML = '';
            
            try {
                const response = await fetch(`${API_BASE_URL}/user/login`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: 'username=admin&password=123456'
                });
                
                const data = await response.json();
                
                if (data.code === '1') {
                    statusDiv.className = 'status success';
                    statusDiv.textContent = '✅ 登录测试成功！';
                    resultDiv.innerHTML = `
                        <h3>登录测试结果：</h3>
                        <pre>${JSON.stringify(data, null, 2)}</pre>
                    `;
                } else {
                    statusDiv.className = 'status error';
                    statusDiv.textContent = `❌ 登录失败: ${data.message}`;
                    resultDiv.innerHTML = `
                        <h3>登录失败原因：</h3>
                        <pre>${JSON.stringify(data, null, 2)}</pre>
                        <p><strong>可能的原因：</strong></p>
                        <ul>
                            <li>用户名或密码错误</li>
                            <li>数据库中不存在测试用户</li>
                            <li>数据库连接问题</li>
                        </ul>
                    `;
                }
            } catch (error) {
                statusDiv.className = 'status error';
                statusDiv.textContent = '❌ 登录测试失败';
                resultDiv.innerHTML = `
                    <h3>错误信息：</h3>
                    <pre>${error.message}</pre>
                `;
            }
        }
    </script>
</body>
</html>
